<template>
  <!-- empty placeholder -->
  <view v-if="isEmpty" class="flex-col-hcenter" style="margin-top: 160rpx">
    <image :src="locati" style="width: 384rpx; height: 312rpx"></image>
    <view style="font-size: 26rpx; color: #999; margin-top: 34rpx">暂无常驻地址</view>
  </view>
  <!-- list -->
  <view class="flex-col-hcenter" style="padding: 15rpx 0 200rpx">
    <view v-for="(item, index) in list" :key="index" class="card-box">
      <AddressCard
        :info="item"
        @select="selectAddress"
        @set-default="setDefault"
        @edit="editAddress"
        @remove="toRemove"
      />
    </view>
  </view>
  <!-- confirm popup -->
  <Confirm ref="confirmPopup" title="删除地址" @cancel="closeConfirm" @confirm="remove" />
</template>

<script setup lang="ts">
import { useAddressStore } from '@/stores/address';
import { getDriverID } from '@/stores/driverID';
import { navTo } from '@/utils/navigator';
import { errorToast, showLoading, successToast } from '@/utils/prompt';
import AddressCard from '@c/address/AddressCard.vue';
import Confirm from '@c/common/Confirm.vue';
import { toPublish } from '@mqtt';
import { computed, ref } from 'vue';
import { locati } from '@/utils/Static';

// static
const driver_id = getDriverID();
const addressStore = useAddressStore();
const list = computed(() => addressStore.list);
const isEmpty = computed(() => list.value.length === 0);
// data
let toRemoveID = -1;
// refs
const confirmPopup = ref(null);
const repeat = ref(true); //放重复点击

const emit = defineEmits(['select-address']);

if (isEmpty.value) {
  addressStore.getList();
}

function selectAddress(addr) {
  emit('select-address', addr);
}
function setDefault(info) {
  showLoading();
  const { id, is_default } = info;
  const payload = {
    driver_id,
    id,
    is_default: is_default === '1' ? '0' : '1',
  };
  if (!repeat.value) {
    return;
  }
  repeat.value = false;
  toPublish('driver/editAddress', payload, (obj: any) => {
    const { code, msg } = obj;
    if (code === 1) {
      repeat.value = true;
      addressStore.getList();
    } else {
      repeat.value = true;
      errorToast(msg);
    }
  });
}
function editAddress(id) {
  navTo(`address/editor?id=${id}`);
}

function toRemove(id) {
  toRemoveID = id;
  openConfirm();
}

function remove() {
  showLoading();
  closeConfirm();
  if (!repeat.value) {
    return;
  }
  repeat.value = false;
  const payload = {
    id: toRemoveID,
    driver_id,
  };
  toPublish('driver/delAddress', payload, (obj: any) => {
    const { code, msg } = obj;
    if (code === 1) {
      repeat.value = true;
      addressStore.getList();
      successToast('删除成功');
    } else {
      repeat.value = true;
      errorToast(msg);
    }
  });
}

function openConfirm() {
  confirmPopup.value.open();
}
function closeConfirm() {
  confirmPopup.value.close();
}
</script>

<style scoped lang="less">
.card-box {
  margin-bottom: 15rpx;
  width: 96%;
}

.add-btn-box {
  position: fixed;
  bottom: 100rpx;
  width: 100vw;

  .btn {
    margin-top: 390rpx;
    width: 370rpx;
    height: 80rpx;
    font-size: 36rpx;
    color: white;
    background: linear-gradient(180deg, #41a3ff 0%, #1b91ff 100%);
    border-radius: 5px;
  }
}

.popup {
  .title-box {
    height: 100rpx;
    border-bottom: 2rpx solid #f2f2f2;
    font-size: 36rpx;
    color: #333;
    word-spacing: 12rpx;
  }

  .btn-grid {
    display: grid;
    grid-template-columns: repeat(2, 228rpx);
    column-gap: 108rpx;
    padding: 38rpx 58rpx;
  }
}
</style>
